<script setup>
import { COLOR_THEME_PRIMARY } from '../../utils/config';
import { useNavBarStyle } from '../../utils/system';
import { MENU_BUTTON_RECT_INFO } from '../../utils/config';
import { computed } from 'vue';
const {statusBarHeight,titleBarHeight,navBarHeight}=useNavBarStyle()


const props=defineProps({
	title:{
		type:String,
		default:""
	},
	titleColor:{
		type:String,
		default:"#000"
	}
})

//是否显示返回键：加载的页面数
const showBack=getCurrentPages().length>1
const navBack=()=>{
	uni.navigateBack({
		fail:()=>{
			uni.reLaunch({
				url:"/pages/index/index"
			})
		}
	})
}

//标题文字位置
const titleTextAlign=computed(()=>{
	if(!showBack) return 'left'
	return 'center'
})
</script>


<template>
  <view class="nav-bar">
	<!--固定栏-->
   <view class="fixed-wrap">
	   <!--状态栏-->
	   <view class="status-bar"></view>
	   <!--标题栏-->
	   <view class="title-bar">
		   <view class="arrow-left" v-if="showBack" @click.stop="navBack">
			   <uni-icons class="arrow" type="left"  size="30" :color="titleColor"></uni-icons>
		   </view>
		   <view class="text">{{props.title}}</view>
		   <view class="menu"></view>
	   </view>
   </view>
   <view class="block-wrap"></view>
   
  </view>
</template>


<style lang="scss" scoped>
.nav-bar{
	width: 750rpx;
	.fixed-wrap{
		 z-index: 8000;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		background:v-bind(COLOR_THEME_PRIMARY);
		.status-bar{
			width: 100%;
			height: v-bind(statusBarHeight);
		}
		.title-bar{
			z-index: 8010;
			display: flex;
			width: 100%;
			text-align: center;
			justify-content: space-between;
			align-items: center;
			height: v-bind(titleBarHeight);
			color:v-bind(titleColor);
			padding: 0 32rpx;
			font-size: 32rpx;
			
			.arrow-left{
				height: 100%;
				width: 80rpx;
				flex-shrink: 0;
				display: flex;
				align-items: center;
			}
			.text{
				
				flex: 1;
				text-align: v-bind(titleTextAlign);
				font-weight: 700;
			}
			.menu{
				height: 100%;
				width: 80rpx;
				flex-shrink: 0;
			}

		}
	}
    .block-wrap{
		width: 100%;
		height: v-bind(navBarHeight);
	}
}


</style>